<script setup>
import router from "../../../router/index.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from"../../../components/MyForm.vue"
import {RULE} from "../../../const/index.js";
import {reactive, ref} from "vue";
import {insertApi} from "../../../api/axios.js";

/* ===================== 页面常量 ===================== */
//路径导航
const navItems =[
  {icon:'User',label: '用户管理'},
  {icon:'Flag',label:'菜单列表（一级菜单）',url:'/Menu'},
  {icon:'Plus',label:'添加菜单（一级菜单）'},
];

/* ===================== 添加表单 ===================== */

//表单项+表单值+表单规则
let items = ref([
  {label:'标题', prop:'title',required: true, span: 12},
  {label:'排序', prop: 'idx', type: 'number', min: 1, required: true, span: 12},
  {label:'图标', prop:'icon', type:'icon', required: true},
  {label:'描述',prop:'info',required: true, type:'textarea'},
]);
let data =reactive({info:'暂无描述'});
let rules = {info: RULE.INFO, icon: RULE.MENU_ICON};

/**
 * 添加成功后调用
 *
 * 1 ．路由到Menu页面
 */
function insertSuccess(){
  router.push('/Menu');
}

</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <el-card class="menu-insert-card" header="添加一级菜单">
    <my-form type="insert"
             :items="items"
             :rules="rules"
             :args="{module: 'menu'}"
             :api="insertApi"
             :params="data"
             :callback="insertSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.menu-insert-card {
  width: 70%; // 宽度
  margin: 20px auto 0; // 外边距
}
</style>